<template>
	<!--pages/buyVip/buyVip.wxml-->
	<!-- 购买会员页面 -->
	<view class="buy-vip-container">
		<!-- 用户信息 -->
		<view class="top-bg">
			<view class="member-info">
				<view class="head-portrait">
					<image :src="userInfo.pic?userInfo.pic:'/static/images/icon/head04.png'"></image>
				</view>
				<view class="text-box">
					<view class="name-box">
						<text class="name">{{userInfo.nickName}}</text>
						<view class="level" v-if="userLevelInfo.userLevel">
							<image class="l-bg"
								:src="userLevelInfo.levelType==1?'/packageMemberIntegral/static/images/icon/integral-icon.png':'/static/images/icon/normal-icon.png'"
								role="img"></image>
							<view class="text">
								{{userLevelInfo.userLevel.level==0?i18n.ordinaryMembership:userLevelInfo.levelName}}
							</view>
						</view>
					</view>
					<view class="date">
						{{userLevelInfo.levelType==1? wxs.spliceDate(userLevelInfo.endTime)+i18n.expire:i18n.notPayingMember}}
					</view>
				</view>
			</view>
		</view>
		<!-- /用户信息 -->

		<!-- swiper-会员套餐 -->
		<view class="vip-card-wrapper">
			<swiper class="pic-swiper" :duration="duration" previous-margin="20rpx" next-margin="70rpx"
				@change="selectVip">
				<block v-for="(item, id) in premiumVipList" :key="id">
					<swiper-item class="banner-item">
						<view class="card-box">
							<view class="banner">
								<view class="card-face">
									<image class="vip-pic" :src="item.img"></image>
									<view :class="'level-mark  ' + (currentLevelId==item.id? '':'white-bg' )">
										{{currentLevelId==item.id?i18n.current:i18n.notPurchased}}
									</view>
									<view class="vip-info">
										<view class="vip-level">{{item.levelName}}</view>
										<view class="vip-price">
											￥<text class="amount">{{item.needAmount}}</text> /
											{{item.term}}{{['',i18n.day,i18n.week,i18n.month,i18n.season,i18n.year][item.termType]}}
										</view>
									</view>
									<view class="vip-level-progress">
										<view class="level-tips" v-if="item.needGrowth>0">
											<text>{{i18n.growthValueUp}} {{item.needGrowth}} {{i18n.readyToBuy}}</text>
											<progress class="level-progress"
												:percent="item.needGrowth>0 ? (currentGrowth/item.needGrowth) *100 : 0"
												backgroundColor="#feeee0" activeColor="#9e642e" active="true"
												border-radius="8" stroke-width="4"></progress>
											<view class="level-span">
												<text
													v-if="userLevelInfo.levelType==1 && userLevelInfo.userLevel.level<=selectPremiumVip.level">{{userLevelInfo.userLevel.levelName}}</text>
												<text>{{item.levelName}}</text>
											</view>
										</view>
										<view class="level-text">{{i18n.currentGrowthValue}} {{userLevelInfo.growth}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- /swiper-会员套餐 -->

			<!-- 会员权益 -->
			<view class="vip-rights-container">
				<view class="member-tit">
					<view class="text">{{i18n.VIPLevelRights}}</view>
				</view>
				<view class="rights-item-con">
					<block v-for="(item, rightsId) in selectPremiumVip.userRights" :key="rightsId">
						<view class="rights-item">
							<view class="rights-img">
								<image mode="heightFix" :src="item.icon"></image>
							</view>
							<view class="rights-tit">{{item.rightsName}}</view>
							<view class="rights-desc">{{item.description}}</view>
						</view>
					</block>
				</view>
			</view>
			<!-- /会员权益 -->
		</view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="bottom-item">
				<view class="vip-price">
					<text class="vip-total-balck">{{i18n.totalPrice}}：</text>
					<text class="symbol">￥</text>
					<text
						class="amount pay-amount">{{selectPremiumVip.needAmount}}</text>/{{selectPremiumVip.term}}{{['',i18n.day,i18n.week,i18n.month,i18n.season,i18n.year][selectPremiumVip.termType]}}
				</view>
			</view>
			<view v-if="userLevelInfo.userLevel"
				:class="['bottom-item','sub-btn',((userLevelInfo.levelType==0 && currentGrowth >= selectPremiumVip.needGrowth) || (userLevelInfo.levelType==1 && currentGrowth >= selectPremiumVip.needGrowth && userLevelInfo.userLevel.level <= selectPremiumVip.level)?'btn':'btn-gray')]"
				@tap="buyNow">{{i18n.buyNow}}</view>
		</view>
		<!-- 购买会员弹出层:支付类型选择 -->
		<view class="popup-hide" v-if="popupShow">
			<view class="popup-box radius">
				<view class="popup-tit radius">
					<text>{{i18n.choosePaymentMethod}}</text>
					<text class="close" @tap="closePopup"></text>
				</view>
				<view class="popup-cnt pay-way">
					<view class="ways">
						<radio-group @change="handleRadioChange">
							<!-- #ifdef H5 -->
							<label>
								<view class="item" @tap="payType = PayTypeConstant.ALIPAY_H5" v-if="!isWechat">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/alipay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.PayWithAli}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.ALIPAY_H5"></radio>
									</view>
								</view>
							</label>
							<label>
								<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_MP" v-if="isWechat">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/wxpay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.payWithWeChat}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.WECHATPAY_MP"></radio>
									</view>
								</view>
							</label>
							<label>
								<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_H5" v-if="!isWechat">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/wxpay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.payWithWeChat}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.WECHATPAY_H5"></radio>
									</view>
								</view>
							</label>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<label>
								<view class="item" @tap="payType = PayTypeConstant.ALIPAY_APP">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/alipay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.PayWithAli}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.ALIPAY_APP"></radio>
									</view>
								</view>
							</label>
							<label>
								<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_APP">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/wxpay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.payWithWeChat}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.WECHATPAY_APP"></radio>
									</view>
								</view>
							</label>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<label>
								<view class="item" @tap="payType = PayTypeConstant.WECHATPAY">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/wxpay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.payWithWeChat}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.WECHATPAY"></radio>
									</view>
								</view>
							</label>
							<!-- #endif -->
							<!-- 余额支付 -->
							<label>
								<view class="item" @tap="payType = PayTypeConstant.BALANCEPAY">
									<view class="pay-name">
										<view class="img">
											<image src="/static/images/icon/balancePay.png" mode=""></image>
										</view>
										<view class="name">{{i18n.balancePay}}</view>
									</view>
									<view class="check">
										<radio :checked="payType==PayTypeConstant.BALANCEPAY"></radio>
									</view>
								</view>
							</label>
							<!-- 余额支付 end -->
						</radio-group>
					</view>
					<view class="sure-pay" @tap="toPay">{{i18n.determinePayment}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script module="wxs" lang="wxs" src="../../../wxs/number.wxs"></script>

<script>
	// pages/buyVip/buyVip.js
	var http = require("../../../utils/http.js");
	var config = require("../../../utils/config.js");
	import {
		PayType,
		AppType
	} from "../../../utils/constant.js";
	import Wechat from "../../../utils/wechat.js";
	import Pay from "../../../utils/pay.js";
	export default {
		data() {
			return {
				isWechat: false, //是否为微信环境
				payType: PayType.ALIPAY_H5, //支付类型，默认支付宝
				PayTypeConstant: PayType, //支付类型常量
				popupShow: false,
				duration: 1000,
				userInfo: {},
				userLevelInfo: {},
				// 当前会员信息
				premiumVipList: [],
				// 付费会员等级列表
				currentLevelId: 0,
				selectPremiumVip: {},
				currentGrowth: "",
				selectPremiumVipIndex: '',
			};
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef H5
			this.isWechat = Wechat.isWechat()
			// #endif
			// #ifdef APP-PLUS
			this.isWechat = false
			this.payType = PayType.ALIPAY_APP
			// #endif
			// #ifdef MP-WEIXIN
			this.payType = PayType.WECHATPAY
			// #endif
			if (this.isWechat) {
				// 如果是微信环境打开,使用公众号支付
				this.payType = PayType.WECHATPAY_MP
			}
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			this.setData({});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.membershipCentre
			});

			// 获取会员信息
			this.getUserLevelInfo();
			// 获取年费会员列表
			this.getPayMemberList();
			// 获取用户信息
			this.queryUserInfo()

		},
		methods: {
			/**
			 * 变更支付方式
			 */
			handleRadioChange() {
				setTimeout(() => {
					console.log(this.payType)
				}, 500)
			},

			/**
			 * 关闭支付类型选择弹窗
			 */
			closePopup: function() {
				this.setData({
					popupShow: false,
				});
			},

			/**
			 * 获取用户信息
			 */
			queryUserInfo: function() {
				uni.showLoading();
				var params = {
					url: "/p/user/userInfo",
					method: "GET",
					data: {},
					callBack: (res) => {
						uni.hideLoading();
						// this.nickName =  res.nickName,  //用户昵称
						// this.pic = res.pic
						this.setData({
							userInfo: res
						})
					}
				};
				http.request(params);
			},

			/**
			 * 获取当前会员信息
			 */
			getUserLevelInfo() {
				var params = {
					url: '/p/score/scoreLevel/page',
					method: 'GET',
					data: {
						levelType: 0
					},
					callBack: res => {
						console.log('res', res);
						this.setData({
							userLevelInfo: res, // 非付费会员等级
							currentLevelId: res.userLevel.id,
							currentGrowth: res.growth
						});
					}
				};
				http.request(params);
			},

			/**
			 * 获取年费会员列表
			 */
			getPayMemberList() {
				var params = {
					url: '/p/score/scoreLevel/page',
					method: 'GET',
					data: {
						levelType: 1
					},
					callBack: res => {
						this.setData({
							premiumVipList: res.userLevels,
							selectPremiumVip: this.selectPremiumVipIndex ? res.userLevels[this
								.selectPremiumVipIndex] : res.userLevels[0]
						})
					}
				};
				http.request(params);
			},

			/**
			 * 立即购买- 根据当前付费会员id
			 */
			buyNow() {
				// 成长值不足
				if (this.currentGrowth < this.selectPremiumVip.needGrowth) {
					uni.showToast({
						title: this.i18n.growthValueTips,
						icon: 'none'
					});
					return
				}
				// 已有付费会员时购买低级付费会员
				if (this.userLevelInfo.levelType == 1 && this.userLevelInfo.userLevel.level > this.selectPremiumVip
					.level) {
					uni.showToast({
						title: this.i18n.cannotBuyLower,
						icon: 'none'
					});
					return
				}

				// 已有付费会员时购买(同级或更高级)付费会员
				if (this.userLevelInfo.levelType == 1 && this.userLevelInfo.userLevel.level <= this.selectPremiumVip
					.level) {
					uni.showModal({
						title: this.i18n.tips,
						content: this.i18n.upgradeMemberTips1 + this.userLevelInfo.userLevel.levelName + ',' +
							this.i18n.upgradeMemberTips2 + this.selectPremiumVip.levelName + ',' + this.i18n
							.upgradeMemberTips3,
						cancelText: this.i18n.cancel,
						confirmText: this.i18n.confirm,
						success: res => {
							if (res.confirm) {
								this.popupShow = true
							} else {}
						}
					});
					return;
				}
				this.popupShow = true
			},



			// 去支付 - 购买会员
			toPay: function() {
				if (this.payType == 9) {
					uni.showModal({
						title: this.i18n.tips,
						content: this.i18n.confirmBalancePay,
						showCancel: true, //是否显示取消按钮
						cancelText: this.i18n.cancel,
						confirmText: this.i18n.confirm,
						success: (res) => {
							if (res.confirm) {
								//点击确定
								Pay.toOrderPay(this.payType, '', '', '', this.selectPremiumVip.id)
							} else if (res.cancel) {
								console.log('用户点击取消');
								uni.showToast({
									title: this.i18n.cancelBalancePay,
									icon: 'none',
									duration: 1500
								});
							}
						},
					})
					return
				}
				Pay.toOrderPay(this.payType, '', '', '', this.selectPremiumVip.id)
			},

			/**
			 * 切换轮播图
			 */
			selectVip(e) {
				this.setData({
					selectPremiumVipIndex: e.detail.current,
					selectPremiumVip: this.premiumVipList[e.detail.current]
				});
			}

		}
	};
</script>
<style lang="scss">
	/* pages/buyVip/buyVip.wxss */

	page {
		height: 100%;
	}

	.buy-vip-container {
		position: relative;
		height: 100%;

		/* 会员信息 */
		.top-bg {
			background-color: #e43130;
			height: 530rpx;


			.member-info {
				padding: 50rpx 30rpx;
				display: flex;
				align-items: center;
				position: relative;

				.head-portrait {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}


				.text-box {
					margin: 0 30rpx 0 20rpx;
					flex: 1;

					.name-box {
						display: flex;
						align-items: center;

						.name {
							text-overflow: ellipsis;
							font-size: 32rpx;
							font-weight: 600;
							color: #fff;
							max-width: 192rpx;
							/* display: -webkit-box; */
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;

						}

						.level {
							/* position: relative; */
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 40rpx;
							padding: 0 14rpx;
							margin-left: 10rpx;
							box-sizing: border-box;
							background: #fff;
							border-radius: 32rpx;

							.l-bg {
								width: 28rpx;
								height: 28rpx;
							}

							.text {
								color: #7c4733;
								font-size: 20rpx;
								font-family: arial;
								position: relative;
								line-height: 1em;
								margin-left: 12rpx;
							}
						}
					}

					.date {
						margin-top: 14rpx;
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		/* /会员信息 */
		.vip-card-wrapper {
			margin-bottom: 200rpx;
			/* 卡片轮播 */

			swiper {
				width: 100%;
				height: 100%;
				overflow: hidden;

				swiper-item {
					margin-left: 35rpx;
					font-size: 26rpx;
				}
			}

			swiper.pic-swiper {
				position: relative;
				margin-top: -330rpx;
				height: 340rpx;

				.banner-item {
					box-sizing: border-box;

					.banner {
						width: 640rpx;
						height: 340rpx;
						border-radius: 14rpx 14rpx 0 0;

						.card-face {
							position: relative;
							padding: 50rpx 30rpx 30rpx;
							display: flex;
							flex-direction: column;
							height: 340rpx;
							box-sizing: border-box;
							color: #fff;
							justify-content: space-between;

							.vip-pic {
								position: absolute;
								top: 0;
								left: 0;
								width: 640rpx;
								height: 340rpx;
								z-index: -1;
							}

							.level-mark {
								position: absolute;
								right: 0;
								top: 0;
								width: 80rpx;
								max-width: 100rpx;
								height: 40rpx;
								line-height: 40rpx;
								color: #7d4834;
								background-color: #ffecc8;
								text-align: center;
								border-radius: 0 14rpx 0 14rpx;
								font-size: 24rpx;
								padding: 0 8rpx;
							}

							.white-bg {
								background-color: #fff;
							}

							.vip-info {
								font-weight: 600;

								.vip-level {
									font-size: 36rpx;
								}

								.vip-price {
									font-size: 26rpx;

									.amount {
										font-size: 70rpx;
									}
								}
							}

							.vip-level-progress {
								padding-bottom: 10rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-weight: lighter;
								font-size: 24rpx;

								.level-tips {
									margin-right: 20rpx;
									flex: 6;
									align-self: center;

									.level-progress {
										margin: 6rpx 0;
									}

									.level-span {
										display: flex;
										justify-content: space-between;
										font-weight: bold;
									}

									.level-text {}
								}
							}
						}
					}
				}
			}

			/* 会员权益 */

			.vip-rights-container {
				position: relative;
				margin-top: -20rpx;
				padding: 50rpx 30rpx;
				width: 750rpx;
				height: 660rpx;
				border-radius: 14rpx 14rpx 0 0;
				background-color: #fff;
				box-sizing: border-box;

				&::after {
					position: absolute;
					top: -10rpx;
					left: 50%;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					border-bottom: 12rpx solid #fff;
					content: "";
					width: 0;
					z-index: 99;
					transform: translateX(-50%);
				}

				.member-tit {
					display: flex;
					align-items: center;

					.text {
						position: relative;
						padding-left: 16rpx;
						flex: 1;
						font-size: 32rpx;
						font-weight: 600;

						&::before {
							position: absolute;
							left: 0;
							top: 15%;
							display: block;
							width: 6rpx;
							height: 70%;
							content: " ";
							background: #e43130;
							border-radius: 6rpx;
						}

					}
				}

				.rights-item-con {
					margin: 40rpx 0 80rpx 0;
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					box-sizing: border-box;
					height: 900rpx;
					overflow-y: scroll;

					&::after {
						content: '';
						width: 30%;
					}

					.rights-item {
						margin-bottom: 40rpx;
						padding: 0 15rpx;
						width: 30%;
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;


						.rights-img {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							overflow: hidden;

							image {
								display: block;
								width: 100%;
								height: 100%;
							}
						}

						.rights-tit {
							margin: 25rpx 0 15rpx 0;
							font-size: 30rpx;
						}

						.rights-desc {
							font-size: 22rpx;
							color: #999;
							text-align: center;
						}
					}
				}
			}
		}

		/* 底部按钮 */

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 2rpx -2rpx 10rpx #eee;
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			z-index: 200;

			.bottom-item {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				background-color: #fff;

				&.sub-btn {
					padding: 28rpx 40rpx;
					height: 100%;
					font-weight: bold;
				}

				.btn {
					background: #e43130;
					color: #fff;
				}

				.btn-gray {
					background: #aaa;
					color: #fff;
				}

				.vip-price {
					color: #e43130;


					.vip-total-balck {
						color: #000;
					}

					.symbol {
						font-size: 26rpx;
					}

					.amount.pay-amount {
						font-weight: bold;
						font-size: 50rpx;
					}
				}
			}
		}

		/**
	 * 支付类型选择弹窗
	 */
		.popup-hide {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.3);

			/* 圆角样式 */
			.radius {
				border-radius: 26rpx 26rpx 0 0;
			}

			.box-radius {
				border-radius: 20rpx;
			}

			.popup-box {
				position: absolute;
				bottom: 0;
				width: 100%;
				min-height: 330px;
				overflow: hidden;
				background-color: #fff;


				.popup-tit {
					position: relative;
					height: 46px;
					line-height: 46px;
					padding-left: 10px;
					font-size: 16px;
					color: #333;
					background-color: #f7f7f7;


					.close {
						position: absolute;
						top: 10px;
						right: 10px;
						padding: 1px;
						line-height: 20px;
						height: 20px;
						width: 20px;
						color: #aaa;
						border-radius: 12px;
						text-align: center;
						font-size: 18px;

						&::before {
							content: "\2716";
						}
					}
				}

				.popup-cnt {
					padding: 0 10px;
					max-height: 429px;
					overflow: auto;
				}

				.pay-way {
					image {
						width: 100%;
						height: 100%;
					}

					.ways {
						padding: 0 20rpx;

						.item {
							display: flex;
							align-items: center;
							border-bottom: 1px solid #eee;
							padding: 20rpx 0;

							.pay-name {
								flex: 1;
								display: flex;
								align-items: center;

								.img {
									width: 44rpx;
									height: 44rpx;
									font-size: 0;
								}

								.name {
									margin-left: 20rpx;
									font-size: 24rpx;
								}
							}
						}
					}

					.sure-pay {
						position: fixed;
						bottom: 40rpx;
						left: 20rpx;
						right: 20rpx;
						width: auto;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 80rpx;
						text-align: center;
						background: #E43130;
						font-size: 24rpx;
						font-weight: 600;
						color: #fff;
					}
				}

				/*radio 选项框大小  */
				radio .wx-radio-input {
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
				}

				/*radio选中后样式  */
				radio .wx-radio-input.wx-radio-input-checked {
					background: #e43130;
					border-color: #e43130;
				}

				/*radio选中后图标样式  */
				radio .wx-radio-input.wx-radio-input-checked::before {
					text-align: center;
					font-size: 20rpx;
					color: #fff;
					background: transparent;
					transform: translate(-50%, -50%) scale(1);
					-webkit-transform: translate(-50%, -50%) scale(1);
				}
			}
		}
	}
</style>
